<template>
  <div>
    <el-dialog :title="option.title" :visible.sync="isShow" :close-on-click-modal="false" width="85%" @open="openDialog"
      @close="closeDialog('ruleForm')">
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" size="small">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-form-item label="机构名称" prop="branchName">
              <el-input v-model.trim="ruleForm.branchName" size="small" :disabled="option.title=='修改工作模式'"
                v-if="option.title=='修改工作模式'"></el-input>
              <select-tree :branch="ruleForm.branchName" @getBranchName="getBranch" v-if="option.title!='修改工作模式'">
              </select-tree>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="工作模式名称" prop="WORKMODENAME">
              <el-input v-model="ruleForm.WORKMODENAME" size="small" placeholder="请选择工作模式名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="5">
            <el-form-item label="工作模式类型" prop="WORKMODETYPE">
              <el-select v-model="ruleForm.WORKMODETYPE" size="small" placeholder="请选择工作模式类型" @change="changeWorkModel">
                <el-option v-for="item in workOptions" :key="item.value" :label="item.name" :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <!-- <el-col :span="9">
            <el-form-item label="坐席类型" prop="AGENTTYPE">
              <el-select v-model="ruleForm.AGENTTYPE" size="small" placeholder="请选择坐席类型">
                <el-option v-for="item in dataOptions" :key="item.FIELDKEY" :label="item.FIELDVALUE" :value="item.FIELDKEY"></el-option>
              </el-select>
            </el-form-item>
          </el-col> -->
          <el-col :span="6">
            <el-form-item label="一致性容差" prop="CONSISTTOLER">
              <el-time-picker size="small" style="width:100%;" v-model="ruleForm.CONSISTTOLER" placeholder="请选择一致性容差"
                @focus="ruleForm.CONSISTTOLER===null || ruleForm.CONSISTTOLER===''?ruleForm.CONSISTTOLER='00:00':ruleForm.CONSISTTOLER"
                format="HH:mm" value-format="HH:mm">
              </el-time-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="说明" prop="NOTES">
              <el-input size="small" v-model="ruleForm.NOTES" placeholder="请输入说明"></el-input>
            </el-form-item>
          </el-col>
          <!-- <div class="selfRow">
            <el-col :span="23">
              <el-collapse v-model="activeNames" style="margin-left:5%;">
                <el-collapse-item name="1">
                  <template slot="title">
                    <i class="header-icon el-icon-s-help"></i> &nbsp;&nbsp;关联的班次
                  </template>
                  <el-table :key="key" :data="tableData" ref="workTable" border fit highlight-current-row
                    style="width: 100%">
                    <el-table-column prop="DATENUM" align="center" label="日期" width="100">
                      <template slot-scope="scope">
                        <div v-if="ruleForm.WORKMODETYPE == 'week'">
                          星期{{scope.row.DATENUM}}
                        </div>
                        <div v-else>
                          {{scope.row.DATENUM}}号
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column align="center" prop="ISENABLEHOLIDAY" :render-header="renderHeader" label="是否可休假"
                      width="180">
                  
                      <template slot-scope="scope">
                        <el-checkbox v-model="scope.row.ISENABLEHOLIDAY" false-label="0" true-label="1"></el-checkbox>
                      </template>
                    </el-table-column>
                    <el-table-column v-for="item in formThead" align="center" :key="item" :label="item">
                      <template slot="header">
                        <el-checkbox :v-model="false" @change="changeHeader(item)" :ref="item" :id="item"></el-checkbox>
                        {{item}}
                        <el-tooltip class="item" effect="dark" content="删除" placement="top">
                          <el-button type="text" size="small" @click="delClass(item)">
                            <i class="el-icon-delete"></i>
                          </el-button>
                        </el-tooltip>
                      </template>
                      <template slot-scope="scope">
                        <el-checkbox v-model="scope.row[item]" :false-label="'0'" @change="changeItem(item)"
                          :true-label="'1'"></el-checkbox>
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-col :span="4" :offset="20" style="margin-top:10px;margin-bottom:10px;">
                    <el-button type="primary" size="mini" icon="el-icon-plus" @click="addEvent">新增关联班次</el-button>
                  </el-col>
                </el-collapse-item>
                <el-collapse-item name="2">
                  <template slot="title">
                    <i class="header-icon el-icon-setting"></i> &nbsp;&nbsp;关联的加班
                  </template>
                  <el-table :data="ruleForm.OTINFO">
                    <el-table-column prop="OTID" label="加班编号"></el-table-column>
                    <el-table-column prop="OTNAME" label="加班名称"></el-table-column>
                    <el-table-column prop="SRTDATETYPE" label="开始时间类型">
                      <template slot-scope="scope">
                        <el-select size="small" v-model="scope.row.SRTDATETYPE" placeholder="请选择开始时间类型">
                          <el-option label="班次开始前" value="0"></el-option>
                          <el-option label="班次结束后" value="1"></el-option>
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" fixed="right">
                      <template slot-scope="scope">
                        <el-tooltip class="item" effect="dark" content="删除加班" placement="top">
                          <el-button type="text" style="margin-left:0px" @click="delOT(scope.row)">
                            <i class="el-icon-delete"></i>
                          </el-button>
                        </el-tooltip>
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-col :span="4" :offset="20" style="margin-top:10px;margin-bottom:10px;">
                    <el-button type="primary" size="mini" icon="el-icon-plus" @click="addOT">新增关联加班</el-button>
                  </el-col>
                </el-collapse-item>
              </el-collapse>
            </el-col>
          </div> -->
        </el-row>
      
      <el-row>
        <el-collapse v-model="activeName">
          <el-collapse-item  name="1">
            <template slot="title">
              <i class="header-icon el-icon-s-help"></i> &nbsp;&nbsp;关联的班次
            </template>
            <el-col :span="4" style="margin-top:10px;margin-bottom:10px;">
              <el-button type="primary" size="mini" icon="el-icon-plus" @click="addEvent">新增关联班次</el-button>
            </el-col>
            <el-table :key="key" :data="tableData" ref="workTable" border fit highlight-current-row
              style="width: 100%">
              <el-table-column prop="DATENUM" align="center" label="日期" width="100">
                <template slot-scope="scope">
                  <div v-if="ruleForm.WORKMODETYPE == 'week'">
                    星期{{scope.row.DATENUM}}
                  </div>
                  <div v-else>
                    {{scope.row.DATENUM}}号
                  </div>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="ISENABLEHOLIDAY" :render-header="renderHeader" label="是否可休假"
                width="180">
                <!-- <template slot="header" >
                  <el-checkbox :v-model="false" @change="changeHeader"></el-checkbox>
                  是否可休假
                </template> -->
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.ISENABLEHOLIDAY" false-label="0" true-label="1"></el-checkbox>
                </template>
              </el-table-column>
              <!-- <el-table-column align="center" prop="ISENABLEHOLIDAY" :render-header="renderHeader" label="早班"
                width="180">
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.ISENABLEHOLIDAY" false-label="0" true-label="1"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="ISENABLEHOLIDAY" :render-header="renderHeader" label="中班"
                width="180">
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.ISENABLEHOLIDAY" false-label="0" true-label="1"></el-checkbox>
                </template>
              </el-table-column>
              <el-table-column align="center" prop="ISENABLEHOLIDAY" :render-header="renderHeader" label="晚班"
                width="180">
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row.ISENABLEHOLIDAY" false-label="0" true-label="1"></el-checkbox>
                </template>
              </el-table-column> -->
              <el-table-column v-for="item in formThead" align="center" :key="item" :label="item">
                <template slot="header">
                  <el-checkbox :v-model="false" @change="changeHeader(item)" :ref="item" :id="item"></el-checkbox>
                  {{item}}
                  <el-tooltip class="item" effect="dark" content="删除" placement="top">
                    <el-button type="text" size="small" @click="delClass(item)">
                      <i class="el-icon-delete"></i>
                    </el-button>
                  </el-tooltip>
                </template>
                <template slot-scope="scope">
                  <el-checkbox v-model="scope.row[item]" :false-label="'0'" @change="changeItem(item)"
                    :true-label="'1'"></el-checkbox>
                </template>
              </el-table-column>
            </el-table>
          </el-collapse-item>
          <el-collapse-item name="2">
            <template slot="title">
              <i class="header-icon el-icon-setting"></i> &nbsp;&nbsp;关联的加班
            </template>
            <el-col :span="4" style="margin-top:10px;margin-bottom:10px;">
              <el-button type="primary" size="mini" icon="el-icon-plus" @click="addOT">新增关联加班</el-button>
            </el-col>
            <el-table :data="ruleForm.OTINFO">
              <el-table-column prop="OTID" label="加班编号"></el-table-column>
              <el-table-column prop="OTNAME" label="加班名称"></el-table-column>
              <el-table-column prop="SRTDATETYPE" label="开始时间类型">
                <template slot-scope="scope">
                  <el-select size="small" v-model="scope.row.SRTDATETYPE" placeholder="请选择开始时间类型">
                    <el-option label="班次开始前" value="0"></el-option>
                    <el-option label="班次结束后" value="1"></el-option>
                    <el-option label="不限" value="2"></el-option>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column label="操作" fixed="right">
                <template slot-scope="scope">
                  <el-tooltip class="item" effect="dark" content="删除加班" placement="top">
                    <el-button type="text" style="margin-left:0px" @click="delOT(scope.row)">
                      <i class="el-icon-delete"></i>
                    </el-button>
                  </el-tooltip>
                </template>
              </el-table-column>
            </el-table>
          </el-collapse-item>
        </el-collapse>
        <el-col :span="8" style="margin-top:10px;">
          <el-form-item>
            <el-button type="primary" size="small" @click="submitForm('ruleForm')">保存</el-button>
            <el-button size="small" type="danger" @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    </el-dialog>
    <!-- 关联班次事件的dialog -->

  
    <el-dialog title="关联班次" append-to-body :visible.sync="eventIsShow" :close-on-click-modal="false" width="80%"
      @open="openEventDialog">
      <el-table :data="eventData" ref="multipleTable" @selection-change="changeFun" @select="selectMemoryFn"
        @select-all="selectAll">
        <el-table-column type="selection" width="55" :selectable="checkboxInit">
        </el-table-column>
        <el-table-column prop="CLASSESID" label="班次编号" width="120">
        </el-table-column>
        <el-table-column prop="CLASSESNAME" label="班次名称" align="center">
        </el-table-column>
        <el-table-column prop="ACTIVITYTYPENAME" label="活动类型" align="center">
        </el-table-column>
        <el-table-column prop="HOURS" label="时长" align="center">
        </el-table-column>
        <el-table-column prop="SRTTIME" label="开始时间" align="center">
        </el-table-column>
        <el-table-column prop="MININTERVAL" label="最短间隔" align="center">
        </el-table-column>
        <el-table-column prop="MAXINTERVAL" label="最长间隔" align="center">
        </el-table-column>
        <el-table-column prop="NOTES" label="说明" align="center">
        </el-table-column>
      </el-table>
      <div class="box" style="text-align:right;">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
          :current-page.sync="currentPage" :page-sizes="[5]" :page-size="pageSize" layout="prev, pager, next"
          :total="tableTotal">
        </el-pagination>
      </div>
      <el-row>
        <el-col :span="8" :offset="16" style="margin-top:10px;">
          <el-button type="primary" size="small" @click="saveEvent">保存</el-button>
          <el-button size="small" @click="cancelEvent">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
    <!-- 关联加班的dialog -->
    <el-dialog title="关联加班" append-to-body :visible.sync="OTIsShow" :close-on-click-modal="false" width="80%"
      @open="openOTDialog">
      <el-table :data="OTOption" ref="multipleTable1" @selection-change="OTchangeFun" @select="OTselectMemoryFn"
        @select-all="OTselectAll">
        <el-table-column type="selection" width="55" :selectable="OTcheckboxInit">
        </el-table-column>
        <el-table-column prop="OTID" label="加班编号" width="120">
        </el-table-column>
        <el-table-column prop="OTNAME" label="加班名称" align="center">
        </el-table-column>
        <el-table-column prop="ACTIVITYTYPENAME" label="活动类型" align="center">
        </el-table-column>
        <el-table-column prop="HOURS" label="时长" align="center">
        </el-table-column>
        <el-table-column prop="MININTERVAL" label="最短间隔" align="center">
        </el-table-column>
        <el-table-column prop="MAXINTERVAL" label="最长间隔" align="center">
        </el-table-column>
        <el-table-column prop="EVENT" label="关联的班次事件名称" width="150" align="center">
          <template slot-scope="scope">
            <div>
              {{scope.row.EVENT | formatString}}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="MINTIMES" label="最少次数" align="center">
        </el-table-column>
        <el-table-column prop="MAXTIMES" label="最多次数" align="center">
        </el-table-column>
        <el-table-column prop="NOTES" label="说明" align="center">
        </el-table-column>
      </el-table>
      <div class="box" style="text-align:right;">
        <el-pagination @size-change="handleSizeChangeOT" @current-change="handleCurrentChangeOT"
          :current-page.sync="currentPageOT" :page-sizes="[5]" :page-size="pageSizeOT" layout="prev, pager, next"
          :total="tableTotalOT">
        </el-pagination>
      </div>
      <el-row>
        <el-col :span="8" :offset="16" style="margin-top:10px;">
          <el-button type="primary" size="small" @click="saveOT">保存</el-button>
          <el-button size="small" @click="cancelOT">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
  import request from "@/common/utils/requestWFM";
  import QueryClass from '@/message/wfm/scheduleDataManage/classManage/classQuery'
  import optionQuery from '@/message/wfm/baseData/dictionaryManage/dictionaryQuery'
  import Update from '@/message/wfm/scheduleDataManage/workModel/workUpdate'
  import Add from '@/message/wfm/scheduleDataManage/workModel/workAdd'
  import queryOT from '@/message/wfm/scheduleDataManage/OTDelayManage/queryOTDelay';
  import selectTree from "@/components/selectTree5/";

  export default {
    components: {
      selectTree
    },
    mounted() {
      // this.queryOption()
    },
    props: {
      option: Object
    },
    filters: {
      formatString(arr) {
        let array = []
        arr.forEach(item => {
          array.push(item.CLASSESEVENTNAME)
        });
        return array.join(',')
      },
    },
    watch: {
      tableData: {
        handler(val) {

        },
        deep: true
      },
      eventData(oldVal, newVal) { // 监听数据变化，然后执行分页记忆自动选中回调
        this.$nextTick(() => {
          this.selectMemoriedDataFn();
        })
      },
      OTOption(oldVal, newVal) { // 监听数据变化，然后执行分页记忆自动选中回调
        this.$nextTick(() => {
          this.selectMemoriedDataFnOT();
        })
      },
    },
    data() {
      return {
        activeName:['1','2'],
        targetEv: [],
        formThead: [], // 默认表头 Default header
        tableData: [{
            DATENUM: '1',
            ISENABLEHOLIDAY: '0'
          },
          {
            DATENUM: '2',
            ISENABLEHOLIDAY: '0'
          },
          {
            DATENUM: '3',
            ISENABLEHOLIDAY: '0'
          },
          {
            DATENUM: '4',
            ISENABLEHOLIDAY: '0'
          },
          {
            DATENUM: '5',
            ISENABLEHOLIDAY: '0'
          },
          {
            DATENUM: '6',
            ISENABLEHOLIDAY: '0'
          },
          {
            DATENUM: '7',
            ISENABLEHOLIDAY: '0'
          },
        ],
        key: 1, // table key
        workOptions: [{
            value: 'week',
            name: '周模式'
          },
          {
            value: 'month',
            name: '月模式'
          },
        ],
        OTIsShow: false,
        OTOption: [], //加班列表
        dataOptions: [], //下拉列表
        OTID: [],
        currentPage: 1,
        currentPageOT: 1,
        pageSize: 5,
        pageSizeOT: 5,
        tableTotal: 0,
        tableTotalOT: 0,
        multipleSelection: [],
        multipleSelectionOT: [],
        QuestionId: [], // 选中的数据QuestionId数组
        eventData: [],
        activeNames: ['1', '2'],
        ruleForm: {
          branchName: '',
          branchNO: '',
          OTINFO: [],
          WORKMODENAME: '',
          NOTES: '',
          AGENTTYPE: '',
          WORKMODETYPE: 'week',
          CONSISTTOLER: '00:00',
          CLASSESINFO: {
            DATENUM: [1, 2]
          },
          arr: [], //关联班次
          holiday: [] //是否休假
        },
        eventIsShow: false, //关联班次事件的isShow
        rules: {
          WORKMODENAME: [{
              required: true,
              message: '请输入工作模式名称',
              trigger: 'blur'
            },
            {
              min: 1,
              max: 10,
              message: '长度在 1 到 10 个字符',
              trigger: 'blur'
            }
          ],
          // AGENTTYPE: [{
          //   required: true,
          //   message: '请选择坐席类型',
          //   trigger: 'change'
          // }],
          WORKMODETYPE: [{
            required: true,
            message: '请选择工作模式类型',
            trigger: 'change'
          }],
          OTNAME: [{
            required: true,
            message: '请选择关联的加班',
            trigger: 'change'
          }],
          branchName: [{
            required: true,
            message: '请选择机构',
            trigger: 'change'
          }],
        },
      }
    },
    computed: {
      isShow: {
        get() {
          return this.option.isShow;
        },
        set(value) {
          this.option.isShow = value;
        }
      }
    },
    methods: {
      changeItem(item) {
        let i = 0
        this.tableData.forEach(ele => {
          if (ele[item] == '1') {
            i++
          }
        })
        let checkItem = document.getElementById(item).firstElementChild
        if (this.ruleForm.WORKMODETYPE == 'week') {
          checkItem.className = i == 7 ? 'el-checkbox__input is-checked is-focus' : 'el-checkbox__input is-focus'
        } else {
          checkItem.className = i == 31 ? 'el-checkbox__input is-checked is-focus' : 'el-checkbox__input is-focus'
        }
      },
      changeHeader(data) {
        let checkItem = document.getElementById(data).firstElementChild
        if (checkItem.className == 'el-checkbox__input is-focus') {
          this.tableData.forEach(item => {
            item[data] = '1'
          })
        } else {
          this.tableData.forEach(item => {
            item[data] = '0'
          })
        }
      },
      select(obj, $event = this.targetEv) {
        // console.log($event.target)
        let me = this
        if ($event) {
          this.targetEv = $event // 这里是获取当前点击的input的dom元素赋值给this.targetEv，方便提交后初始化使用
        }
        if (obj === 1) {
          this.flag = false
        } else {
          this.flag = true
        }
        this.targetEv.target.checked = obj
        this.targetEv.target.parentNode.className = obj ? 'el-checkbox__input is-checked' : 'el-checkbox__input'
        me.tableData.forEach((val, index) => {
          obj == true ? '1' : '0'
          if (val) {
            me.$set(me.tableData[index], 'ISENABLEHOLIDAY', obj.toString())
            if (obj === '1') {}
          }
        })
        obj = this.flag
      },
      renderHeader(h, {
        column
      }) {
        return h(
          'div',
          [
            h('el-checkbox', {
              style: 'display:inline-flex;margin-right:5px;margin-top:2px;',
              attrs: {
                'true-label': '1',
                'false-label': '0'
              },
              on: {
                change: ($event, column) => this.select($event,
                  column), // 选中事件 $event, column，这里$event=true,column是input的dom当在select里打印的时候
              }
            }),
            h('span', column.label),
          ],
        )
      },
      // 选择工作模式
      changeWorkModel(val) {
        if (val == 'week') {
          this.tableData = [{
              DATENUM: '1',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '2',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '3',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '4',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '5',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '6',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '7',
              ISENABLEHOLIDAY: '0'
            },
          ]
          this.formThead = []
          this.ruleForm.arr = []
        } else {
          this.tableData = [{
              DATENUM: '1',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '2',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '3',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '4',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '5',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '6',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '7',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '8',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '9',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '10',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '11',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '12',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '13',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '14',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '15',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '16',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '17',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '18',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '19',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '20',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '21',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '22',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '23',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '24',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '25',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '26',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '27',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '28',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '29',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '30',
              ISENABLEHOLIDAY: '0'
            },
            {
              DATENUM: '31',
              ISENABLEHOLIDAY: '0'
            },
          ]
          this.formThead = []
          this.ruleForm.arr = []
        }
      },
      delClass(val) {
        let data = JSON.parse(JSON.stringify(this.tableData))
        data.forEach(item => {
          delete item[val]
        });
        let i;
        this.ruleForm.arr.forEach((item, index) => {
          if (item.CLASSESNAME == val) {
            i = index
          }
        });
        let head = JSON.parse(JSON.stringify(this.formThead))
        head.splice(head.indexOf(val), 1)
        this.ruleForm.arr.splice(i, 1)
        this.tableData = JSON.parse(JSON.stringify(data))
        this.formThead = JSON.parse(JSON.stringify(head))
        this.$forceUpdate()
      },
      getBranch(data) {
        this.ruleForm.branchName = data.BRANCHNAME
        this.ruleForm.branchNO = data.BRANCHNO
        this.popoverShow = false
      },
      // 查询加班
      async OTQuery() {
        let resBody = new queryOT();
        resBody.data.BRANCHNO = this.ruleForm.branchNO;
        resBody.data.PageFlag = '4';
        resBody.data.CurrPage = this.currentPageOT
        resBody.data.PageRowNum = this.pageSizeOT
        let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.OTOption = response.BODY.RSPSTRUCT;
          this.tableTotalOT = response.BODY.TotalRowNum;
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          });
        }
      },
      changeFun(val) {
        this.$nextTick(() => {
          let QuestionId = []
          this.multipleSelection.forEach(L => L.forEach(M => QuestionId.push(M.QuestionId)))
          this.QuestionId = QuestionId
        })
      },
      selectMemoryFn(val, row) { // 设置分页记忆二位数组方法
        // 注意：val 传过来默认为数组类型 ，row 为 Object（当前选择数据对象）
        let currentArr = this.multipleSelection[this.currentPage - 1] // 当前分页对应数组
        if (!currentArr) {
          this.multipleSelection[this.currentPage - 1] = val // 不存在这个二维数组，则创建这个二位数组
        } else { // 存在
          if (val.includes(row)) { // 选中
            this.multipleSelection[this.currentPage - 1] = val
          } else { // 取消
            for (var i = 0; i < currentArr.length; i++) {
              if (currentArr[i]) {
                if (currentArr[i].CLASSESID == row.CLASSESID) {
                  delete currentArr[i];
                  break;
                }
              }
            }
            // delete currentArr[currentArr.indexOf(row)]
          }
        }
      },
      selectAll(selection) { // 全选切换方法
        if (selection.length) { // 全选
          this.multipleSelection[this.currentPage - 1] = selection
        } else { // 全不选
          this.multipleSelection[this.currentPage - 1] = []
        }
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.classEventQuery();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.classEventQuery();
      },
      handleSizeChangeOT(val) {
        this.pageSizeOT = val;
        this.OTQuery();
      },
      handleCurrentChangeOT(val) {
        this.currentPageOT = val;
        this.OTQuery();
      },
      selectMemoriedDataFn() { // 分页记忆自动选中方法
        let currentArr = this.multipleSelection[this.currentPage - 1] // 当前分页对应被选中数据
        if (currentArr && currentArr.length) { // 存在则继续执行
          let tempRowsIDs = this.eventData.map(L => L.CLASSESID) // 当前分页被选中数据的id集合
          currentArr.forEach((item, index) => { // 遍历当前分页被选中数据
            if (tempRowsIDs.includes(item.CLASSESID)) { // id匹配上，则选中
              this.$refs.multipleTable.toggleRowSelection(this.eventData[tempRowsIDs.indexOf(item.CLASSESID)])
            }
          })
        }
      },
      OTchangeFun(val) {
        this.$nextTick(() => {
          let QuestionId = []
          this.multipleSelectionOT.forEach(L => L.forEach(M => QuestionId.push(M.QuestionId)))
          this.QuestionId = QuestionId;
          // console.log(this.TipsId);
        })
      },
      OTselectMemoryFn(val, row) { // 设置分页记忆二位数组方法
        // 注意：val 传过来默认为数组类型 ，row 为 Object（当前选择数据对象）
        let currentArr = this.multipleSelectionOT[this.currentPageOT - 1] // 当前分页对应数组
        if (!currentArr) {
          this.multipleSelectionOT[this.currentPageOT - 1] = val // 不存在这个二维数组，则创建这个二位数组
        } else { // 存在
          if (val.includes(row)) { // 选中
            this.multipleSelectionOT[this.currentPageOT - 1] = val
          } else { // 取消
            for (var i = 0; i < currentArr.length; i++) {
              if (currentArr[i]) {
                if (currentArr[i].OTID == row.OTID) {
                  delete currentArr[i];
                  break;
                }
              }
            }
            // delete currentArr[currentArr.indexOf(row)]
          }
        }
      },

      OTselectAll(selection) { // 全选切换方法
        if (selection.length) { // 全选
          this.multipleSelectionOT[this.currentPageOT - 1] = selection
        } else { // 全不选
          this.multipleSelectionOT[this.currentPageOT - 1] = []
        }
      },
      selectMemoriedDataFnOT() { // 分页记忆自动选中方法
        let currentArr = this.multipleSelectionOT[this.currentPageOT - 1] // 当前分页对应被选中数据
        if (currentArr && currentArr.length) { // 存在则继续执行
          let tempRowsIDs = this.OTOption.map(L => L.OTID) // 当前分页被选中数据的id集合
          currentArr.forEach((item, index) => { // 遍历当前分页被选中数据
            if (tempRowsIDs.includes(item.OTID)) { // id匹配上，则选中
              this.$refs.multipleTable1.toggleRowSelection(this.OTOption[tempRowsIDs.indexOf(item.OTID)])
            }
          })
        }
      },
      // 去重
      uniqueArr(array) {
        var n = []; //一个新的临时数组
        //遍历当前数组
        for (var i = 0; i < array.length; i++) {
          //如果当前数组的第i已经保存进了临时数组，那么跳过，
          //否则把当前项push到临时数组里面
          if (n.indexOf(array[i]) == -1) n.push(array[i]);
        }
        return n;
      },
      closeDialog(formName) {
        this.$refs[formName].resetFields();
        this.$refs[formName].clearValidate();
        this.tableData = [{
              DATENUM: '1',
              ISENABLEHOLIDAY: '0',

            },
            {
              DATENUM: '2',
              ISENABLEHOLIDAY: '0',
            },
            {
              DATENUM: '3',
              ISENABLEHOLIDAY: '0',
            },
            {
              DATENUM: '4',
              ISENABLEHOLIDAY: '0',
            },
            {
              DATENUM: '5',
              ISENABLEHOLIDAY: '0',
            },
            {
              DATENUM: '6',
              ISENABLEHOLIDAY: '0',
            },
            {
              DATENUM: '7',
              ISENABLEHOLIDAY: '0',
            },
          ],
          this.formThead = []
        this.ruleForm.CLASSESIDLIST = ''
        this.ruleForm.CLASSESID = ''
        this.ruleForm.CLASSESNAME = ''
        this.ruleForm.ACTIVITYTYPE = ''
        this.ruleForm.HOURS = ''
        this.ruleForm.SRTTIME = ''
        this.ruleForm.NOTES = ''
        this.ruleForm.arr = []
        this.ruleForm.holiday = []
        this.ruleForm.branchName = ''
        this.ruleForm.branchNO = ''
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        // console.log(val)
      },
      // 班次查询
      async classEventQuery() {
        let resBody = new QueryClass()
        resBody.data.BRANCHNO = this.ruleForm.branchNO;
        resBody.data.CurrPage = this.currentPage + "";
        resBody.data.PageRowNum = this.pageSize + "";
        let response = await request(resBody);
        if (response.SYS_HEAD.ReturnCode == "000000") {
          this.eventData = response.BODY.RSPSTRUCT
          this.tableTotal = response.BODY.TotalRowNum;
        } else {
          this.$message({
            type: "error",
            message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD.ReturnMessage
          })
        }
      },
      // 打开关联班次事件的dialog
      openEventDialog() {
        this.currentPage = 1;
        this.multipleSelection = [];
        this.classEventQuery()
      },
      openOTDialog() {
        this.currentPageOT = 1;
        this.multipleSelectionOT = [];
        this.OTQuery()
      },
      addEvent() {
        this.eventIsShow = true
      },
      addOT() {
        this.OTIsShow = true
      },
      // 保存所选的班次事件
      saveEvent() {
        if (this.option.title === '新增工作模式') {
          this.multipleSelection.forEach(item => {
            item.forEach(i => {
              this.ruleForm.arr.push(i)
            })
          })
          // console.log('所选班次', this.ruleForm.arr)
          let head = []
          let data = []
          data = JSON.parse(JSON.stringify(this.tableData))
          this.ruleForm.arr.forEach(item => {
            head.push(item.CLASSESNAME)
            data.forEach(element => {
              element[item.CLASSESNAME + ''] = '0'
            });
          });
          this.tableData = JSON.parse(JSON.stringify(data))
          // console.log('tableData', this.tableData)
          this.formThead = head
          this.eventIsShow = false
        } else {
          let chooseArr = []
          this.multipleSelection.forEach(item => {
            item.forEach(i => {
              chooseArr.push(i)
              this.ruleForm.arr.push(i)
            })
          })
          let head = JSON.parse(JSON.stringify(this.formThead))
          let data = []
          data = JSON.parse(JSON.stringify(this.tableData))
          chooseArr.forEach(item => {
            head.push(item.CLASSESNAME)
            data.forEach(element => {
              element[item.CLASSESNAME + ''] = '0'
            });
          });
          this.tableData = JSON.parse(JSON.stringify(data))
          this.formThead = head
          this.eventIsShow = false
        }

      },
      // 取消所选的班次事件
      cancelEvent() {
        this.eventIsShow = false
      },
      // 保存所选的加班
      saveOT() {
        // console.log(this.multipleSelectionOT)
        this.multipleSelectionOT.forEach(item => {
          item.forEach(i => {
            this.ruleForm.OTINFO.push(i)
          })
        })
        this.OTIsShow = false
      },
      // 取消所选的加班
      cancelOT() {
        this.OTIsShow = false
      },
      delOT(row) {
        // console.log(row)
        let i;
        var OTID = row.OTID;
        this.ruleForm.OTINFO.forEach((item, index) => {
          if (item.OTID === row.OTID) {
            i = index
          }
        });
        this.ruleForm.OTINFO.splice(i, 1)
        // console.log(this.checkList);
      },
      openDialog() {
        if (this.option.title === '修改工作模式') {
          this.ruleForm = JSON.parse(JSON.stringify(this.option.row));
          if (this.ruleForm.WORKMODETYPE == 'week') {
            this.tableData = [{
                DATENUM: '1',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '2',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '3',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '4',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '5',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '6',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '7',
                ISENABLEHOLIDAY: '0'
              },
            ]
          } else {
            this.tableData = [{
                DATENUM: '1',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '2',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '3',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '4',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '5',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '6',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '7',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '8',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '9',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '10',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '11',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '12',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '13',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '14',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '15',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '16',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '17',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '18',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '19',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '20',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '21',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '22',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '23',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '24',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '25',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '26',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '27',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '28',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '29',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '30',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '31',
                ISENABLEHOLIDAY: '0'
              },
            ]
          }
          this.formThead = []
          let head = []
          let data = []
          data = JSON.parse(JSON.stringify(this.ruleForm.CLASSESINFO))
          this.ruleForm.arr.forEach(item => {
            head.push(item.CLASSESNAME)
            data.forEach(element => {
              element[item.CLASSESNAME + ''] = '0'
            });
          });
          data.forEach(item => {
            item.CLASSES.forEach(element => {
              if (element.CLASSESNAME) {
                item[element.CLASSESNAME + ''] = '1'
              }
            })
          });
          this.tableData = JSON.parse(JSON.stringify(data))
          this.formThead = head
        } else {
          this.ruleForm = {
            branchNO: '',
            branchName: '',
            WORKMODENAME: '',
            NOTES: '',
            AGENTTYPE: '',
            WORKMODETYPE: 'week',
            CONSISTTOLER: '',
            CLASSESINFO: {
              DATENUM: [1, 2]
            },
            OTINFO: [], // 关联加班
            arr: [], //关联班次
            holiday: [] //是否休假
          };
        }
        if (this.$refs['ruleForm'] != undefined) {
          this.$refs['ruleForm'].clearValidate();
          this.$refs['ruleForm'].resetFields();
        }
      },
      checkboxInit(row, index) {
        var selectId = this.ruleForm.arr.map(item => item.CLASSESID) // 数据的id集合
        if (selectId.includes(row.CLASSESID)) { // id匹配上，则不可选中
          return false;
        } else {
          return true;
        }
      },
      OTcheckboxInit(row, index) {
        var selectId = this.ruleForm.OTINFO.map(item => item.OTID) // 数据的id集合
        if (selectId.includes(row.OTID)) { // id匹配上，则不可选中
          return false;
        } else {
          return true;
        }
      },
      submitForm(formName) {
        this.$refs[formName].validate(async (valid) => {
          let data = JSON.parse(JSON.stringify(this.tableData))
          if (this.formThead.length == 0) {
            this.$message({
              type: "error",
              message: "请先关联班次"
            })
            return;
          }
          data.forEach(item => {
            item.CLASSESIDLIST = []
          })
          data.forEach(item => {
            this.formThead.forEach(element => {
              if (item[element] == '0') {
                delete item[element]
              } else {
                this.ruleForm.arr.forEach(demo => {
                  if (demo.CLASSESNAME == element) {
                    item.CLASSESIDLIST.push(demo.CLASSESID)
                  }
                })
              }
            });
          });
          data.forEach(item => {
            item.CLASSESIDLIST = item.CLASSESIDLIST.join(',')
          })
          if (valid) {
            let resBody;
            if (this.option.title === '新增工作模式') {
              resBody = new Add()
              resBody.data.BRANCHNO = this.ruleForm.branchNO
            } else {
              resBody = new Update();
              resBody.data.WORKMODEID = this.ruleForm.WORKMODEID;
            }
            resBody.data.WORKMODENAME = this.ruleForm.WORKMODENAME;
            resBody.data.NOTES = this.ruleForm.NOTES;
            resBody.data.AGENTTYPE = this.ruleForm.AGENTTYPE;
            resBody.data.WORKMODETYPE = this.ruleForm.WORKMODETYPE;
            resBody.data.CONSISTTOLER = (this.ruleForm.CONSISTTOLER==undefined||this.ruleForm.CONSISTTOLER=='')?'00:00':this.ruleForm.CONSISTTOLER;
            resBody.data.CLASSESINFO = data;
            resBody.data.OTINFO = this.ruleForm.OTINFO;
            this.ruleForm.OTINFO.forEach(item => {

            });
            let response = await request(resBody);
            if (response.SYS_HEAD.ReturnCode == "000000") {
              this.option.isShow = false
              this.$emit("ListenClass")
            } else {
              this.$message({
                type: "error",
                message: "请求失败，错误码:" + response.SYS_HEAD.ReturnCode + "，错误信息：" + response.SYS_HEAD
                  .ReturnMessage
              })
            }
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
        this.$refs[formName].clearValidate();
        if (this.option.title == '新增工作模式') {
          this.eventData = []
          this.OTOption = []
          this.multipleSelection = [],
          this.multipleSelectionOT = [],
          this.checkList = [];
          this.checkList1 = {};
          this.tableData = [{
                DATENUM: '1',
                ISENABLEHOLIDAY: '0',

              },
              {
                DATENUM: '2',
                ISENABLEHOLIDAY: '0',
              },
              {
                DATENUM: '3',
                ISENABLEHOLIDAY: '0',
              },
              {
                DATENUM: '4',
                ISENABLEHOLIDAY: '0',
              },
              {
                DATENUM: '5',
                ISENABLEHOLIDAY: '0',
              },
              {
                DATENUM: '6',
                ISENABLEHOLIDAY: '0',
              },
              {
                DATENUM: '7',
                ISENABLEHOLIDAY: '0',
              },
            ],
            this.ruleForm = {
            branchNO: '',
            branchName: '',
            WORKMODENAME: '',
            NOTES: '',
            AGENTTYPE: '',
            WORKMODETYPE: 'week',
            CONSISTTOLER: '',
            CLASSESINFO: {
              DATENUM: [1, 2]
            },
            OTINFO: [], // 关联加班
            arr: [], //关联班次
            holiday: [] //是否休假
          };
          this.formThead = []
        }else{
          this.ruleForm = JSON.parse(JSON.stringify(this.option.row));
          if (this.ruleForm.WORKMODETYPE == 'week') {
            this.tableData = [{
                DATENUM: '1',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '2',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '3',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '4',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '5',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '6',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '7',
                ISENABLEHOLIDAY: '0'
              },
            ]
          } else {
            this.tableData = [{
                DATENUM: '1',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '2',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '3',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '4',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '5',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '6',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '7',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '8',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '9',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '10',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '11',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '12',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '13',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '14',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '15',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '16',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '17',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '18',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '19',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '20',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '21',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '22',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '23',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '24',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '25',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '26',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '27',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '28',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '29',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '30',
                ISENABLEHOLIDAY: '0'
              },
              {
                DATENUM: '31',
                ISENABLEHOLIDAY: '0'
              },
            ]
          }
          this.formThead = []
          let head = []
          let data = []
          data = JSON.parse(JSON.stringify(this.ruleForm.CLASSESINFO))
          this.ruleForm.arr.forEach(item => {
            head.push(item.CLASSESNAME)
            data.forEach(element => {
              element[item.CLASSESNAME + ''] = '0'
            });
          });
          data.forEach(item => {
            item.CLASSES.forEach(element => {
              if (element.CLASSESNAME) {
                item[element.CLASSESNAME + ''] = '1'
              }
            })
          });
          this.tableData = JSON.parse(JSON.stringify(data))
          this.formThead = head
        }
      },
    }
  };

</script>

<style lang="scss">
  .option .el-checkbox__label {
    display: none !important;
  }

  .selfRow .el-row {
    line-height: 2.4;
  }

</style>
<style lang="scss" scoped>

</style>
